<template>
    <div>
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="this.toadd">添加</el-button>
            </el-col>
            <el-col :span="4">
                <el-input placeholder="请输入仓库名关键字" v-model="keyword" class="input-with-select">
                    <el-button slot="append" @click="this.initData" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- el-table表示表格 -->
        <el-table :data="tableData.filter(data => !search || data.whName.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <!-- el-table-column表示每一列 -->
            <!-- label是表头 -->
            <!-- prop是数据的某个属性 -->
            <el-table-column label="仓库编号" prop="whId"></el-table-column>
            <el-table-column label="仓库名称" prop="whName"></el-table-column>
            <el-table-column label="利润中心" prop="whProfitCenter"></el-table-column>
            <el-table-column label="地址" prop="whAddr"></el-table-column>
            <el-table-column label="容量" prop="whCapacity"></el-table-column>
            <el-table-column label="备注" prop="whNotes"></el-table-column>


            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <!-- <el-button slot="reference" size="mini" type="danger">删除</el-button> -->
                    <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[5, 10, 20, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 弹出层 -->
        <el-dialog width="400px" title="添加信息" :visible.sync="dialogFormVisible" >
            <el-form :model="form">
                <el-form-item v-show="isShow" label="仓库编号" :label-width="formLabelWidth">
                    <el-input v-model="form.whId"></el-input>
                </el-form-item>
                <el-form-item label="仓库名称" :label-width="formLabelWidth">
                    <el-input v-model="form.whName">
                    </el-input>
                </el-form-item>
                <el-form-item label="利润中心" :label-width="formLabelWidth">
                    <el-select v-model="form.whProfitCenter" placeholder="请选择利润中心">
                        <el-option label="重庆" value="重庆"></el-option>
                        <el-option label="成都" value="成都"></el-option>
                        <el-option label="广州" value="广州"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="form.whAddr">
                        <el-button slot="append" type="primary" @click="innerVisible=true" icon="el-icon-location"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="容量" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.whCapacity" :min="1"></el-input> -->
                    <el-input-number ></el-input-number>
                    <!-- <el-input-number v-model="form.whCapacity" :min="1"></el-input-number> -->
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.whNotes"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="this.hanldSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 弹出层嵌套 -->
        <el-dialog width="100%" :title="currentLocation" :visible.sync="innerVisible" append-to-body>
            <baidu-map class="map" :center="city" :scroll-wheel-zoom="true" @click="getLocation">
            <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-control>
                <bm-auto-complete v-model="mapkeyword">
                    <input v-model="mapkeyword" placeholder="请输入关键字搜索">
                </bm-auto-complete>
            </bm-control>
            <bm-local-search :keyword="mapkeyword" :auto-viewport="true"></bm-local-search>
            <bm-marker :position="currentPostion" :dragging="true"></bm-marker>
        </baidu-map>
        </el-dialog>

    </div>
</template>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>

<script>
//导入qs工具，用于格式化表单数据
import qs from 'qs'
import axios from 'axios'
export default {
    created() {
        this.initData()
    },
    data() {
        return {
            tableData: [],
            search: '',
            page: 1,
            size: 5,
            total: 0,
            keyword: '',
            dialogFormVisible: false,
            form: {
                whCapacity:10000,
            },
            formLabelWidth: '80px',
            isShow:false,
            mapkeyword: '',
            city: '重庆',
            currentPostion: '',
            currentLocation: '',
            innerVisible:false
        }
    },
    methods: {
        initData() {
            //axios.get("http://192.168.124.96:9090/warehouse?page="+this.page).then(res => {
            //console.log(res.data.obj);
            //res.data是ResultData,其中包含了code msg obj data
            //这里调用的分页查询，返回值中包含了一个分页模型对象obj
            //获取分页查询到的集合
            //axios.get("URL",{params:{k:var,k:v}})方式同时携带多个参数
            axios.get("http://192.168.124.96:9090/warehouse",
                {
                    params: {
                        page: this.page,
                        size: this.size,
                        keyword: this.keyword
                    }
                }
            ).then(res => {
                if (res.data.code != 0) {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    })
                    this.$router.replace("/")
                    return;
                }
                this.tableData = res.data.obj.records;
                //更改total的值
                this.total = res.data.obj.total;
            });
        },
        hanldSubmit() {
            
            console.log(this.form);
            axios.post("http://192.168.124.96:9090/warehouse", qs.stringify(this.form)).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.dialogFormVisible = false;
                }
            })
        },
        toadd(){
            //显示对话框
            this.dialogFormVisible= true,
            //隐藏id
            this.isShow=false,
            this.form={}
        },
        getLocation(e) {
            const myGeo = new BMap.Geocoder() // 创建地址解析器的实例
            myGeo.getLocation(e.point, rs => {
                // console.log(rs.address);
                // console.log(rs.surroundingPois) // 附近的点(array)
                // console.log(rs.business) // 商圈字段
                // let adr = rs.addressComponents
                // this.address = adr.province + adr.city + adr.district +adr.street + adr.streetNumber // 省市区街道门牌号
                //console.log(rs);
                this.currentPostion = rs.point;
                this.currentLocation = rs.address + (rs.surroundingPois.length==0?'':rs.surroundingPois[0].title);
                console.log(this.currentLocation);
                this.form.whAddr=this.currentLocation
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
            //显示对话框
            this.dialogFormVisible= true,
            //隐藏id
            this.isShow=true,
            this.form=row
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete("http://192.168.124.96:9090/warehouse/" + row.whId).then(res => {
                    if (res.data.code == 0) {
                        this.page=1;
                        this.initData()
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSizeChange(val) {
            this.size = val;
            this.initData()
        },
        handleCurrentChange(val) {
            //更新page
            this.page = val;
            this.initData()
        }
    },
}
</script>